<link href="/assets/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<script src="/assets/fileinput/js/plugins/buffer.min.js" type="text/javascript">
</script>
<script src="/assets/fileinput/js/plugins/filetype.min.js" type="text/javascript">
</script>
<script src="/assets/fileinput/js/plugins/piexif.js" type="text/javascript">
</script>
<script src="/assets/fileinput/js/plugins/sortable.js" type="text/javascript">
</script>
<script src="/assets/fileinput/js/fileinput.js" type="text/javascript">
</script>
<style type="text/css">
.table td{
    vertical-align: middle!important;
}
  
</style>


<div class="container">
    <div class="row">
        <div class="col-md-12">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
                    <span class="sr-only">
                        Toggle navigation
                    </span>
                    <span class="icon-bar">
                    </span>
                    <span class="icon-bar">
                    </span>
                    <span class="icon-bar">
                    </span>
                </button>
                <a class="navbar-brand" href="#">
                    人脸
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form action='{:url("index/index")}' class="navbar-form navbar-left" method="get">
                    <div class="form-group">
                        项目集:
                        <select name="item_id">
                            <option value="">
                                请选择
                            </option>
                            {volist name="items" id="vo"}
                            <option  {if $search.item_id eq $vo.item_id}selected{/if}  value="{$vo.item_id}">
                                {$vo.item_name}
                            </option>
                            {/volist}
                        </select>
                        &ensp;
                        状态：
                        <select name="status">
                            <option value="">
                                请选择
                            </option>
                            {foreach $status as $k=>$v}
                            <option {if $search.status eq $k}selected{/if}   value="{$k}" >
                                {$v}
                            </option>
                            {/foreach}
                        </select>
                        &ensp;
                        分页：

                        <select name="pagesize">
                             
                            {foreach $pagesize as $v}
                            <option {if $search.pagesize eq $v}selected{/if}   value="{$v}" >
                                {$v}
                            </option>
                            {/foreach}
                        </select>

                        <input class="input-medium search-query" name="kwd" type="text" value="{$search.kwd}"/>
                    </div>
                    <button class="btn btn-default" type="submit">
                        搜索
                    </button>
                    &ensp;
                    [共计
                    <strong style="color:#ff0000;font-size:14px;">
                        {$total}
                    </strong>
                    条记录]
                </form>
               
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12">
        <div class="pull-left">{if $search.item_id}<h4><span class="glyphicon glyphicon-home"></span>&nbsp;{$items[$search['item_id']]['item_name']}</h4>{/if}</div>
        <div class="pull-right" style="margin-bottom: 10px;">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-default editall"  title="批量编辑">编辑</button>

            <button class="btn btn-primary btn-small importimgs" type="button">
                +导入
            </button>
            <button class="btn btn-primary  btn-info btn-small exportimgs" type="button">
                -导出
            </button>

        </div>
        <table class="table table-hover table-bordered table-condensed"  >
            <thead>
                <tr>
                    <th class="text-center">
                         <input type="checkbox" class="chkall">
                    </th> <th class="text-center">
                        ID
                    </th>
                    <th class="text-center">
                        图片
                    </th>
                    <th class="text-center">
                        标注
                    </th>
                    <th class="text-center">
                        项目集
                    </th> 

                    <th class="text-center">
                        更新时间
                    </th>
                    <th class="text-center">
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                {volist name="ls" id="vo"}
                <tr>
                    <td class="text-center">
                        <input type="checkbox"  class="ids" value="{$vo.img_id}">
                    </td>  <td class="text-center">
                        {$vo.img_id}
                    </td>
                    <td class="text-center">
                        <a href="/imglab/api.html?img_id={$vo.img_id}" target="_blank">
                            <img height="120" src="{$vo.img}" width="120" class="img-circle"/>
                        </a>
                    </td>
                    <td class="text-center">
                        {if $vo.fdata}Y{else/}N/A{/if}
                    </td>
                    <td class="text-center">
                        {$vo.item_name}
                    </td> 
                    <td class="text-center">
                        {$vo.updated|date="Y-m-d H:i:s"}
                    </td>
                    <td class="text-center">
                        <a class="default-primary" href="/imglab/api.html?img_id={$vo.img_id}" target="_blank">
                            <span class="glyphicon glyphicon-edit"></span>
                        </a>
                        &ensp;
                        <a class="default-primary opt_del" href="javascript:;" rel="{$vo.img_id}"   >
                            <span class="glyphicon glyphicon-trash"></span>
                        </a>
                    </td>
                </tr>
                {/volist}
            </tbody>
        </table>
    </div>
    </div>
    <div class="row text-center">
        {$page|raw}
    </div>
    <!-- fileinput -->
    <div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">
                            ×
                        </span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                       人脸导入
                    </h4>
                </div>
                <div class="modal-body">
                    <p class="help-block">注意：一次最多30张图片</p>
                     
                        <p><select class="upload_item_id">
                            <option value="">
                                请选择项目集
                            </option>
                            {volist name="items" id="vo"}
                            <option $search.item_id="" $vo.item_id}selected{="" eq="" if}="" value="{$vo.item_id}" {if="">
                                {$vo.item_name}
                            </option>
                            {/volist}
                        </select>&ensp;<a href="/index/items?add=1">[新建项目集]</a></p>
                    <form enctype="multipart/form-data">
                        <div class="file-loading">
                            <input class="file" data-min-file-count="1" name="myfile[]" data-theme="fa5" id="file-0a" multiple="" type="file">
                            </input>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- fileinput -->

    <!-- export modal -->
    <div class="modal fade" id="modal-export">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">导出数据</h4>
                </div>
                <div class="modal-body">
                        <form action="" method="POST" role="form" id="export_form">
                         项目集：   
                         <select name="item_id">
                            <option value="">
                                请选择项目集
                            </option>
                            {volist name="items" id="vo"}
                            <option $search.item_id="" $vo.item_id}selected{="" eq="" if}="" value="{$vo.item_id}" {if="">
                                {$vo.item_name}
                            </option>
                            {/volist}
                        </select>
                          
                        
                            <div class="form-group">
                                <label for="">训练集占比</label>
                                <input type="text" class="form-control" name="train"  value="9" >
                            </div>
                        <div class="form-group">
                                <label for="">测试集占比</label>
                                <input type="text" class="form-control" name="test" value="0.5">
                            </div>
                         <div class="form-group">
                                <label for="">验证集占比</label>
                                <input type="text" class="form-control" name="valid" value="0.5">
                            </div>               
                        
                            <button type="button" class="btn btn-primary btn_export">提交</button>
                        </form>
                </div>
                
            </div>
        </div>
    </div>
    <!-- export modal -->
    <script type="text/javascript">
    $(".chkall").click(function(event) {
         let _chk = $(this).prop("checked");
         $(".ids").prop("checked",_chk)

       

    });

     $('.editall').click(function(event) {  
            let _ids=[];
            $(".ids:checked").each(function(index, el) {
                _ids.push($(el).val());
            });
            
            if(_ids.length=="0"){
                $.ThinkBox.error('请选择');
                return false;
            }
            self.location.href="/imglab/api.html?img_id="+_ids.join(",");
     });


	var fff   =  $("#file-0a").fileinput({     
        uploadExtraData:getFormData(),
        uploadUrl: '/index/upload', // you must set a valid URL here else you will get an error
        allowedFileExtensions: ['jpg', 'png', 'gif'],    
        maxFileSize: 20480,
        maxFilesNum: 10,
        uploadAsync: false,
        showPreview:false, 
        
    }).on('filebatchuploadcomplete', function(event, data) {
        $('#myModal').modal('hide') ;
        $.ThinkBox.success('上传完成');
        setTimeout(function(){self.location.reload();},1000);
    }).on('filebatchpreupload',function(event,data){
        if(!$(".upload_item_id").val()){
            alert('请选择项目集');
            fff.fileinput("pause");

        }
    });


    function getFormData(){
        let data = {};
        data.item_id = $('.upload_item_id').val();
        return data;
    }

    $('.importimgs').click(function(event) {            
            $('#myModal').modal('show') ;
    }); 

    $('.exportimgs').click(function(event) {
        
           $("#modal-export").modal("show");
          
    });


    $("#modal-export .btn_export").click(function(event) {    

        let _data = $("#export_form").serializeArray();
        let dataObj = {};
        $(_data).each(function(i, field){
          dataObj[field.name] = field.value;
        });

        let _item_id=  dataObj.item_id;
         
        if(!_item_id){
            $.ThinkBox.error('请选择项目集');
            return false;
        }

        $.getJSON("/index/export",_data,function(data){
            $("#modal-export").modal("hide");
            $.ThinkBox.success(data.msg);
       })



    });


    $(".upload_item_id").change(function(event) {
         fff.fileinput("refresh",{"uploadExtraData":getFormData()});
    });
    
    $('.opt_del').click(function(event) {
        let _th = $(this);
        var  opt_id = _th.attr('rel');     

        $.ThinkBox.confirm('确定删除？', {
            'okClick' : function(){
                 $.getJSON('/index/imgdel?id='+opt_id, function(data) {
                _th.closest('tr').remove();

                $.ThinkBox.success(data.msg);


            });
                   this.hide();
            },
            'cancelClick' : function(){
               this.hide();
            },'drag' : true,
            'modal' : true
        });   
        return false;

    });
    </script>
</div>